<script setup lang="ts">
import {
    userHistorySearchRecent,
    userHistorySearchDelete,
    userHistorySearchPopular
} from '@/api/home'
import { SearchRecordType } from '@/types/pages/commodity/search'

interface IProps {
    type: number | string
}

const props = withDefaults(defineProps<IProps>(), {
    type: 1 // 类型：1.产品 2.店铺 3.视频 4.帖子
})

const RecentSearch = ref<Array<IHistorySearch>>([])

// 搜索记录
const userHistorySearchRecentFn = async () => {
    const { code, msg, data } = await userHistorySearchRecent({
        type: props.type
    })
    if (code == 0) {
        RecentSearch.value = data
    }
}
// 热搜
const userHistorySearchPopularFn = async () => {
    const { code, msg, data } = await userHistorySearchPopular({
        type: props.type
    })
    if (code == 0) {
        MostSearchedHashtags.value = data
    }
}

onMounted(() => {
    // userHistorySearchRecentFn();
    userHistorySearchPopularFn()
})
const delFn = async (id: string) => {
    const { code, msg, data } = await userHistorySearchDelete(id, props.type)
    userHistorySearchRecentFn()
}
const MostSearchedHashtags = ref<IHotSearch[]>([])

defineExpose({
    userHistorySearchRecentFn
})
const emits = defineEmits(['change'])
const searchFn = (text: string) => {
    emits('change', text)
}
</script>

<template>
    <view class="search-record" v-if="MostSearchedHashtags.length > 0 || RecentSearch.length > 0">
        <view class="rencent" v-if="RecentSearch.length > 0">
            <view class="top">
                <view class="title">
                    <!-- <image mode="widthFix" src="@/static/image/record.png"></image> -->
                    {{ '历史搜索' }}
                </view>
                <view class="clear" @click="delFn('')">{{ '清空' }}</view>
            </view>
            <view class="list grid-2 gap-[20rpx]">
                <view
                    class="item"
                    @click.stop="searchFn(item.content)"
                    v-for="(item, index) in RecentSearch"
                    :key="index"
                >
                    <view class="text">
                        {{ item.content }}
                    </view>
                    <image
                        @click.stop="delFn(item.id)"
                        style="width: 10px"
                        mode="widthFix"
                        :src="$getImg('/img/icon/close.png')"
                    ></image>
                </view>
            </view>
        </view>
        <view class="popular" v-if="MostSearchedHashtags.length > 0">
            <view class="top">
                <view class="title">
                    <!-- <image mode="widthFix" src="@/static/image/popular.png"></image> -->
                    {{ '热门搜索' }}
                </view>
            </view>
            <view class="list grid-2 gap-[20rpx]">
                <view
                    class="item"
                    @click="searchFn(item.content)"
                    v-for="(item, index) in MostSearchedHashtags"
                    :key="index"
                >
                    <view class="text">
                        <fui-overflow-hidden size="26" :text="item.content"></fui-overflow-hidden>
                        <!-- {{ item.content }} -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.search-record {
    padding: 30rpx;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .rencent,
    .popular {
        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
                display: flex;
                align-items: center;

                font-size: 15px;
                font-weight: bold;
                line-height: 20px;
                text-align: justify;
                /* 浏览器可能不支持 */
                letter-spacing: 0px;

                font-feature-settings: 'kern' on;
                color: #3d3d3d;

                image {
                    width: 20px;
                    margin-right: 10px;
                }
            }

            .clear {
                font-size: 14px;
                font-weight: normal;
                line-height: 20px;
                text-align: right;
                letter-spacing: 0px;

                /* tab未选 */
                color: #999999;
            }
        }

        .list {
            margin: 10px 0 0;
            max-height: 200px;
            overflow: auto;

            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .text {
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                    letter-spacing: 0px;

                    /* Primary */
                    color: #242424;
                }
            }
        }
    }
}
</style>
